import { useEffect,useState,useDebugValue } from "react";
import {useWinSize} from './hooks/useWinSize.js'
import {useMouse} from './hooks/useMouse.js'
function App() {
  // page 当前页面
  // list 数据
  // flag 是否可以请求
  const [page,setPage] = useState(1);
  const [list,setList] = useState([]);
  const [flag,setFlag] = useState(true);
  const size = useWinSize();
  const position = useMouse(true);
 
  useEffect(()=>{
   getList()
  },[page])
  function getList(){
	  fetch("http://dida100.com/mi/list.php?channel_id=hot&page="+page)
	  .then(res=>res.json())
	  .then(res=>{
		  // console.log(res.result)
	    // 更新list
	    setList(list.concat(res.result))
	    // flag改为true
	    // 下面useEffect会被再次执行
	    setFlag(true); 
	  })
  }
// 默认会执行一次，当page改变时候，再次执行
 function check(){
	
      // 获取到最新的last
      var  last = document.querySelector(".item:last-child");
      // 如果flag为真并且最后一个元素进入页面
      if(flag&&last.getBoundingClientRect().top<=window.innerHeight){
        // 设置flag,当前这个useEffect有会被执行一次
        setFlag(false);
        // 设置page更新 ，上面useEffect会被执行
        setPage(page+1)
		 console.log("check-flag",flag)
      }
    }
  // 如果flag改变了，监听页面滚动和
  useEffect(()=>{
    
    // 监听滚动
    window.addEventListener("scroll",check);
    // 移除监听
    return ()=>{
      console.log("卸载了");
      window.removeEventListener("scroll",check);
    }

  },[flag])
  // 当flag发生变化（默认至少执行一次）
  return ( <div>
	{JSON.stringify(position)}
    <h1>新闻触底刷新</h1> 
    {list.map((item,index)=>{
		if(item.video_url){
			return <div className="item"  key={index}>
			<h3>{item.title}</h3>
				<video width="80%" src={item.video_url} controls></video>
			</div>
		}else{
			return <div className="item"  key={index}>
			<h3>{item.title}</h3>
			<p key={index}>{item.summary}</p>
			</div>
			
			
		}
		
	})}
    
    </div>);
}

export default App;